<template>
	<el-container>
		<el-aside style="width: auto;">
			<el-container>
				<el-header style="height: 560px; padding: 0px;">
					<el-container>
						<el-aside style="width: auto;">
							<el-main>
								<div style="width:270px;height: 480px;">
									<sc-video v-if="src" :options="options" :src="src" isLive>
									</sc-video>
								</div>
								<div style="padding-top: 15px; display: flex; justify-content: flex-end;">
									<el-button-group>
										<el-button type="primary" @click="dialogShow=true">推流参数</el-button>
										<el-button type="primary">开始直播</el-button>
									</el-button-group>
								</div>
							</el-main>
						</el-aside>
						<el-aside style="width: auto;">
							<el-main class="nopadding">
								<el-header>
									评论管理
								</el-header>
								<el-main class="nopadding">
									<LiveChat style="min-height: 495px;width:100%"></LiveChat>
								</el-main>
							</el-main>
						</el-aside>
					</el-container>
				</el-header>
				<el-main style="height:auto;padding: 0;">
					<el-container>
						<el-header style="padding-top: 15px;">
							营销工具
						</el-header>
						<el-main>
							<el-row :gutter="0" class="box">
								<el-col :span="4" v-for="(icon, index) in 6" :key="index">
									<div class="icon-box">
										<el-icon>
											<ScIconEmoji />
										</el-icon>
										<p>福袋</p>
									</div>
								</el-col>
							</el-row>
						</el-main>
					</el-container>
				</el-main>
			</el-container>
		</el-aside>

		<el-main class="nopadding">
			<el-container>
				<el-header style="padding-top: 15px;">
					直播商品
					<div class="right-panel">
						<el-input placeholder="商品名称" clearable></el-input>
						<el-button type="primary" icon="el-icon-plus"></el-button>
					</div>
				</el-header>
				<el-main class="nopadding">

				</el-main>
			</el-container>

		</el-main>
	</el-container>

	<sc-dialog v-model="dialogShow" draggable title="推流码" :width="400">
		<view style="display: flex; justify-content: center; align-items: center;">
			<sc-qr-code :text="pushUrl" :size="300"></sc-qr-code>
		</view>
		<template #footer>
			<el-button @click="dialogShow = false">取 消</el-button>
			<el-button type="primary" @click="dialogShow = false">确 定</el-button>
		</template>
	</sc-dialog>

</template>

<script>
	//
	// http://playertest.longtailvideo.com/adaptive/bipbop/gear4/prog_index.m3u8
	import scVideo from '@/components/scVideo'

	import LiveChat from './LiveChat.vue'
	import CTRTS from '@/plugins/ctrts-pull-sdk';

	export default {
		name: 'scvideo',
		components: {
			scVideo,
			LiveChat
		},
		data() {
			return {
				dialogShow: false,
				pushUrl: "",
				src: "",
				playUrl: "https://blkq-static.oss-cn-shenzhen.aliyuncs.com/static/images/comm/14633029_13551386615808_335004.mp4",
				options: {
					poster: "https://fastly.jsdelivr.net/gh/scuiadmin/CDN/video/scui-player-demo-1080_Moment.jpg",
					pip: true,
					height: 667,
					width: 375,
				}
			}
		},
		mounted() {


			this.$API.system.livePlayer.show.get({
				id: 1
			}).then(res => {
				this.src = res.data.flv;
				this.pushUrl = res.data.push;
				console.error(this.src)
			})
			/*
						let engine = CTRTS.createEngine({
							url: "",
						});

						engine.on("stream-added", (event) => {
							stream = event.stream;
							// event.stream.play('pullStreamDiv', { muted: true });
							event.stream.play("pullStreamDiv");
							Object.values(stream.event).forEach((ev) => {
								stream.on(ev, () => {
									// console.log(ev + '事件回调');
								});
							});
						});

						engine.on("stats", (type, data) => {
							if (type == 114) {
								// console.log('mt = '+ type + ' 统计信息：', data);
							} else {
								console.log("mt = " + type + " 统计信息：", data);
							}
						});

						engine.on("error", (error) => {
							console.error("engine error event: ", error);
						});

						*/
		},
		methods: {

		}
	}
</script>

<style scoped>
	.box {
		border-top: 1px solid #eee;
		border-left: 1px solid #eee;
	}

	.icon-box {
		height: 120px;
		text-align: center;
		background: #fff;
		border-bottom: 1px solid #eee;
		border-right: 1px solid #eee;
		color: #666;
		padding: 30px 10px;
	}

	.icon-box i {
		font-size: 26px;
		transition: color .15s linear;
	}

	.icon-box p {
		color: #999;
		margin-top: 15px;
		transition: color .15s linear;
	}

	.icon-box:hover i,
	.icon-box:hover p {
		color: #5cb6ff;
	}
</style>
